<template>
    <el-button type="primary" @click="add">新增</el-button>
    <el-table :data="tablelist" style="width:200%;">
        <el-table-column prop="goodInfoId" label="序号" />
        <el-table-column prop="goodName" label="商品名称" width="100px" />
        <el-table-column prop="batch" label="生产批次" width="150px" />
        <el-table-column prop="shelflife" label="保质期（天）" />
        <el-table-column prop="production" label="生产许可证" width="150px" />
        <el-table-column prop="goodCompany" label="生产企业" width="170px" />
        <el-table-column prop="information" label="信息完善度" width="170px">
            <div class="demo-progress">
                <el-progress :percentage="80" />
            </div>

        </el-table-column>
        <el-table-column prop="createName" label="创建人" />
        <el-table-column prop="createTime" label="创建时间" width="190px">
            <template #default="scope">
                {{ scope.row.createTime.split('T')[0] }}
            </template>
        </el-table-column>
        <el-table-column prop="updateName" label="修改人" />
        <el-table-column label="操作" width="300px">
            <template #default="scope">
                <el-button type="primary" @click="info(scope.row.goodInfoId)">详情</el-button>
                <el-button type="primary" @click="xiu(scope.row.goodInfoId)">修改</el-button>
                <el-button type="primary" @click="daochu()">导出溯源码</el-button>
                <el-button type="danger" @click="del(scope.row.goodInfoId)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 添加 -->
    <el-dialog v-model="dialogVisible" title="基本信息" width="500">
        <el-form :model="form" label-width="auto" style="max-width: 600px">
            <el-form-item label="商品名称" prop="goodId">
                <el-select v-model="form.goodId" placeholder="请选择">
                    <el-option v-for="item in goods" :label="item.goodName" :value="item.goodId" />
                </el-select>
            </el-form-item>
            <el-form-item label="生产批次" prop="batch">
                <el-input v-model="form.batch" />
            </el-form-item>
            <el-form-item label="保质期（天）" prop="shelflife">
                <el-input v-model="form.shelflife" />
            </el-form-item>
            <el-form-item label="生产许可证号" prop="production">
                <el-input v-model="form.production" />
            </el-form-item>
            <el-form-item label="生产企业" prop="goodCompany">
                <el-input v-model="form.goodCompany" />
            </el-form-item>
            <el-form-item label="封面图" prop="goodImages">
                <el-upload class="avatar-uploader" action="http://localhost:5287/api/GoodInfo/Upload"
                    :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="form.goodImages" :src="form.goodImages" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">新增</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!-- 反填 -->
    <el-dialog v-model="dialogVisiblexiu" title="基本信息" width="500">
        <el-form :model="form1" label-width="auto" style="max-width: 600px">
            <el-form-item label="商品名称" prop="goodId">
                <el-select v-model="form1.goodId" placeholder="请选择">
                    <el-option v-for="item in goods" :label="item.goodName" :value="item.goodId" />
                </el-select>
            </el-form-item>
            <el-form-item label="生产批次" prop="batch">
                <el-input v-model="form1.batch" />
            </el-form-item>
            <el-form-item label="保质期（天）" prop="shelflife">
                <el-input v-model="form1.shelflife" />
            </el-form-item>
            <el-form-item label="生产许可证号" prop="production">
                <el-input v-model="form1.production" />
            </el-form-item>
            <el-form-item label="生产企业" prop="goodCompany">
                <el-input v-model="form1.goodCompany" />
            </el-form-item>
            <el-form-item label="封面图" prop="goodImages">
                <el-upload class="avatar-uploader" action="http://localhost:5287/api/GoodInfo/Upload"
                    :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="form1.goodImages" :src="form1.goodImages" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmitxiu">修改</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!-- 导出源码 -->
    <el-dialog v-model="Visible" title="导出设置" width="500" :before-close="handleClose">
        <template #footer>
            <div>
                <input v-model="text" placeholder="输入文本生成二维码地址" />
                <button @click="generateQRCodeURL">生成二维码地址</button>
                <button v-if="qrCodeURL" @click="downloadTXT">下载文本文件</button>
                <div v-if="qrCodeURL">
                    <p>二维码地址：<a :href="qrCodeURL" target="_blank">点击查看二维码</a></p>
                </div>
            </div>
        </template>
    </el-dialog>

</template>

<script setup lang="ts">
import { reactive, ref, onMounted, inject } from 'vue'
import { type AxiosStatic } from 'axios';
const axios = inject('axios') as AxiosStatic;
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
import { Plus } from '@element-plus/icons-vue'
//进度条
const format = (percentage: any) => (percentage === 100 ? 'Full' : `${percentage}%`)
onMounted(() => {
    GetGoodList();
    GetGood();
    // GetGoodFan();//反填
})

//显示
const tablelist = ref([])
const GetGoodList = () => {
    axios.get('/api/GoodInfo/GetGoodInfoShow')
        .then(res => {
            tablelist.value = res.data
        })
}

//下拉框
const goods: any = ref([])
const GetGood = () => {
    axios.get("/api/Goods/GetGoods")
        .then(res => {
            goods.value = res.data
        })
}

import { ElMessageBox, ElMessage } from 'element-plus'

const form = reactive({
    //"goodInfoId": '',
    "goodId": "",
    "batch": "",
    "shelflife": "",
    "production": "",
    "goodCompany": "",
    //"information": ,
    "goodImages": "",
    "createName": "麦当当",
    "createTime": "2024-09-03",
    "updateName": "胡萝卜",
    "isDel": 0
})

const dialogVisible = ref(false)

const add = () => {
    dialogVisible.value = true
}

const onSubmit = () => {
    axios.post("/api/GoodInfo/GetGoodInfoAdd", form)
        .then(res => {
            if (res.data > 0) {
                ElMessage.success('添加成功')
                GetGoodList()
                dialogVisible.value = false
            } else {
                ElMessage.error('添加失败')
            }
        })
}
import type { UploadProps } from 'element-plus'

const imageUrl = ref('')
const handleAvatarSuccess = (url: any) => {
    form.goodImages = "http://localhost:5287" + url

    console.log(form.goodImages)
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('图片不能是jpeg类型的!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('图片大小不能超过2MB!')
        return false
    }
    return true
}
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('Are you sure to close this dialog?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}

const info = (id: any) => {
    router.push({
        path: '/breedinfo',
        query: {
            id: id
        }
    })
}

const dialogVisiblexiu = ref(false)
//修改
const xiu = (id: any) => {
    axios.get("/api/GoodInfo/GetFindGoodinfo?id=" + id)
        .then(res => {
            form1.goodInfoId = res.data.goodInfoId
            form1.goodId = res.data.goodId
            //form1.createName = res.data.goodName
            form1.goodImages = res.data.goodImages
            form1.shelflife = res.data.shelflife
            form1.batch = res.data.batch
            form1.production = res.data.production
            form1.goodCompany = res.data.goodCompany
            form1.information = res.data.information
            form1.createTime = res.data.createTime
            form1.updateName = res.data.updateName
            form1.isDel = res.data.isDel
        })
    dialogVisiblexiu.value = true
}

const form1 = reactive({
    "goodInfoId": '',
    "goodId": "",
    "batch": "",
    "shelflife": "",
    "production": "",
    "goodCompany": "",
    "information": '',
    "goodImages": "",
    "createName": "麦当当",
    "createTime": "2024-09-03",
    "updateName": "胡萝卜",
    "isDel": 0
})



const onSubmitxiu = () => {
    axios.post("/api/GoodInfo/GetGoodInfoUpdate", form1)
        .then(res => {
            if (res.data > 0) {
                ElMessage.success('修改成功')
                GetGoodList()
                dialogVisiblexiu.value = false
            } else {
                ElMessage.error('修改失败')
            }
        })
}


//删除
const del = (id: any) => {
    ElMessageBox.confirm(
        '确认要删除吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.post("/api/GoodInfo/GetDelGoodInfo?id=" + id)
                .then(res => {
                    if (res.data > 0) {
                        ElMessage.success('删除成功')
                        GetGoodList()
                    } else {
                        ElMessage.error('删除失败')
                    }
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}


import QRCode from 'qrcode';
const Visible = ref(false)
//导出溯源码
const daochu = () => {
    Visible.value = true

};

//生成二维码
const text = ref('');
const qrCodeURL = ref('');
const generateQRCodeURL = () => {
    QRCode.toDataURL(text.value)
        .then((url) => {
            qrCodeURL.value = url;
        })
        .catch((err) => {
            console.error(err);
        });
};
// 导出文本文件
const downloadTXT = () => {
    const blob = new Blob([qrCodeURL.value], { type: 'text/plain;charset=utf-8' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'qrcode-url.txt'; // 你可以修改文件名
    link.click();
};

</script>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>